let baseUrl = 'http://146.56.230.35:3007/'
let id = 0
$(function () {
  renderUser()
  $('#userName').on('blur', checkUsername)
  $('#phone').on('blur', checkPhone)
  $('#birthday').on('blur', checkBirthday)
  //提交表单
  $('.update-btn').click(async function () {
    //1、表单验证
    let f1 = await checkUsername()
    let f2 = await checkPhone()
    let f3 = checkBirthday()
    //2、判断验证结果
    let flag = f1 & f2 & f3
    //3、验证不通过
    if (flag === 0) {
      return
    }
    $.ajax({
      url: baseUrl + 'users/updateUserById',
      type: 'PUT',
      data: {
        id,
        userName: $('#userName').val(),
        gender: +$('#gender').val(),
        birthday: $('#birthday').val(),
        address: $('#address').val(),
        userRole: +$('.userRole:checked').val(),
        phone: $('#phone').val(),
      },
      success(res) {
        console.log(res)
        if (res.code !== 200) {
          return alert('修改失败')
        }
        if (res.data[0] === 1) {
          alert(res.msg)
          location = 'userList.html'
        }
      },
      error(err) {
        console.error(err)
      },
      headers: {
        token: getToken().token,
      },
    })
  })
})

/**
 * 1、验证生日 非空 符合日期格式
 * @date 2021-03-26
 * @returns {any}
 */
function checkBirthday() {
  let v = $('#birthday').val()
  let span = $('#birthday').next()
  let parent = $('#birthday').parent()
  span.html('')
  parent[0].className = ''
  //判断空
  if (!v) {
    span.html('生日不能为空')
    parent[0].className = 'error'
    return false
  }
  //判断日期格式
  if (new Date(v) == 'Invalid Date') {
    span.html('生日格式不合法')
    parent[0].className = 'error'
    return false
  }
  span.html('生日正确')
  parent[0].className = 'ok'
  return true
}

/**
 * 2、验证电话，非空，唯一
 * @date 2021-03-23
 * @returns {any}
 */
async function checkPhone() {
  let phone = $('#phone')
  let v = phone.val()
  let parent = phone.parent()
  let span = phone.next()
  span.html('')
  parent[0].className = ''
  //1、判断空
  if (!v) {
    span.html('电话不能空！')
    parent[0].className = 'error'
    return false
  }
  //2、判断复合电话规则
  let reg = /^1[3456789]\d{9}$/
  if (!reg.test(v)) {
    span.html('电话不合法！')
    parent[0].className = 'error'
    return false
  }
  //3、判断唯一
  let res = await getUserByPhone()
  if (res.user !== null) {
    span.html('电话被占用了！')
    parent[0].className = 'error'
    return false
  }
  //正确的结果
  span.html('电话正确！')
  parent[0].className = 'ok'
  return true
}

/**
 * 3、通过电话查询用户信息
 * @date 2021-03-26
 * @returns {any}
 */
function getUserByPhone() {
  return new Promise((resolve, reject) => {
    $.ajax({
      url: 'http://146.56.230.35:3007/users/getUserByPhone',
      data: { phone: $('#phone').val() },
      success(res) {
        resolve(res)
      },
      error(err) {
        reject(err)
      },
      headers: {
        token: getToken().token,
      },
    })
  })
}

/**
 * 4、验证用户名 唯一、非空、2-12位
 * @date 2021-03-26
 * @returns {any}
 */
async function checkUsername() {
  let userName = $('#userName')
  let v = userName.val()
  let parent = userName.parent()
  let span = userName.next()
  parent[0].className = ''
  span.html('')
  //非空
  if (!v) {
    span.html('用户名不能空')
    parent[0].className = 'error'
    return false
  }
  //中-英文2-12
  let reg = /(^[\u4e00-\u9fa5]{2,12}$)|(^[a-zA-Z\d_$]{2,12}$)/
  if (!reg.test(v)) {
    span.html('用户名2-12位')
    parent[0].className = 'error'
    return false
  }
  //验证唯一
  let res = await getUserByUsername(v)
  console.log(res.user)
  if (res.user) {
    span.html('用户名被占用')
    parent[0].className = 'error'
    return false
  }
  span.html('用户名正确')
  parent[0].className = 'ok'
  return true
}

/**
 * 5、通过用户名查询用户信息
 * @date 2021-03-26
 * @param {any} userName
 * @returns {any}
 */
function getUserByUsername(userName) {
  return new Promise((resolve, reject) => {
    $.ajax({
      url: baseUrl + 'users/getUserByUserName',
      type: 'GET',
      data: { userName },
      success(data) {
        resolve(data)
      },
      error(err) {
        reject(err)
      },
      headers: {
        token: getToken().token,
      },
    })
  })
}

/**
 * 6、获得用户信息在表单中显示
 * @date 2021-03-26
 * @returns {any}
 */
async function renderUser() {
  //1、获得url中的id
  // search ='?id=68383'
  let search = location.search || '?id=0'
  // index是=首次出现的位置
  let index = search.indexOf('=')
  // 截取=后面的文字
  id = +search.substring(index + 1)

  //2、根据id查询用户
  let res = await getUserById(id)
  console.log(res)

  //3、把查询到的用户进行页码数据绑定
  if (res.user) {
    bindUserInfo(res.user)
  }
}

/**
 * 7、根据id查询用户
 * @date 2021-03-25
 * @param {any} id
 * @returns {any}
 */
function getUserById(id) {
  return new Promise((resolve, reject) => {
    $.ajax({
      url: baseUrl + 'users/getUserById',
      type: 'GET',
      data: { id },
      success(res) {
        resolve(res)
      },
      error(err) {
        reject(err)
      },
      headers: {
        token: getToken().token,
      },
    })
  })
}

/**
 * 8、绑定用户信息到表单
 * @date 2021-03-25
 * @param {any} user
 * @returns {any}
 */
function bindUserInfo(user) {
  $('#userName').val(user.userName)
  $('#gender>option').each(function () {
    //1、先设置所以的option不选中，唯独value===user.gender的选中
    $(this).removeAttr('selected')
    if (this.innerText === user.gender) {
      $(this).attr('selected', 'selected')
    }
  })
  $('#birthday').val(user.birthday)
  $('#phone').val(user.phone)
  $('#address').val(user.address)
  $('.userRole').each(function () {
    //先设置所有的radio不选中
    this.checked = false
    //符合条件的选中
    let v = +this.value
    if (v === user.userRole) {
      this.checked = true
    }
  })
}
